<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击提示效果</title>
<meta content="" name="description">
<script type="text/javascript" src="/j-tool/jquery.js"></script>

<script>
	
	var mousePos;
	document.onmousemove = mouseMove; 
	function mousePosition(ev){
		if(ev.pageX || ev.pageY){
			return {x:ev.pageX, y:ev.pageY, s:$(window).scrollTop()};
		}else{
			return {
				x:ev.clientX  - $(window).scrollLeft(),
				y:ev.clientY  +  $(window).scrollTop()
			};
		}
	}
	function mouseMove(ev)
	{
		ev = ev || window.event;
		mousePos = mousePosition(ev);//鼠标坐标
	}
	
	function clear()
	{
		$('b').animate({top:(mousePos.y-161),opacity: 'toggle'},{duration:400,complete:function(){$(this).detach();}});
	}

	function showNotice()
	{
		if(!$('b').is(':animated'))
		{
			$('body').append("<b style='position:absolute;display:none;'>Hello</b>");
			$('b').css({"left": (mousePos.x+5), "top":mousePos.y}).animate({top:(mousePos.y-100),opacity: 'toggle'},{duration:700,complete:clear});
		}
	}
</script>

<style>
	div{height:50px; margin:20px 10px;}
	.ps1{background-color:red;}
	.ps2{background-color:gray;}
	.ps3{background-color:black;}
	.playButtn{
		background: url("http://flash.youban.com/images/book/mp3Audio.png") no-repeat scroll -216px -48px transparent;
		display: block;
		height: 54px;
		left: 1px;
		top: 5px;
		width: 54px;
		cursor:pointer;
	}
</style>

<body>
	<div class="ps1" onclick="showNotice();"></div>
	<div class="ps2" onclick="showNotice();"></div>
	<div class="ps3" onclick="showNotice();"></div>
	<div class="ps" style="height:800px;"><span class="playButtn" onclick="showNotice();"></span></div>
</body>
<script>
	$(".playButtn").hover(
		function () 
		{
			$(this).css({"background-position": "-270px -48px" });
		},
		function () 
		{
			$(this).css({"background-position": "-216px -48px" });
		}
	);
</script>
</html>